<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<c:set value="${pageContext.request.contextPath}" var="basePath"></c:set>

	<div id="upper-toolbar">
		<div id="upper-toolbar-tools">
			<ul>  
		        <li><a id="tool-undo" class="btn skt-tool-btn"><i class="skt-icon skt-icon-undo"></i></a></li>
		        <li><a id="tool-redo" class="btn skt-tool-btn"><i class="skt-icon skt-icon-redo"></i></a></li>
		        <li><a id="tool-copy" class="btn skt-tool-btn"><i class="skt-icon skt-icon-copy"></i></a></li>
		        <li><a id="tool-paste" class="btn skt-tool-btn"><i class="skt-icon skt-icon-paste"></i></a></li>
		        <li><a id="tool-export" class="btn skt-tool-btn"><i class="skt-icon skt-icon-export"></i></a></li>
		        <li><a id="tool-clear" class="btn skt-tool-btn"><i class="skt-icon skt-icon-clear"></i></a></li>
		        <li><a id="tool-import" class="btn skt-tool-btn"><i class="skt-icon icon-picture"></i></a></li>
		   </ul>
		</div>
		
		<div id="upper-toolbar-users">
			<span id="upper-toolbar-users-label">Editing:</span>
			<div id="upper-toolbar-users-concurrent-list"></div>
		</div>
		
		<div id="upper-toolbar-options"></div>
	</div>
    
    <div id="floating-toolbar">
    	<div id="floating-toolbar-top">
    		<i id="active-tool-icon"></i>
			<h5 id="active-tool-label">Tools</h5>
    	</div>
      	<ul>
        	<li><a id="tool-select" class="btn skt-tool-btn"><i class="skt-icon skt-icon-select"></i></a></li>
        	<li><a id="tool-pen" class="btn skt-tool-btn"><i class="skt-icon skt-icon-pen"></i></a></li>
        	<li><a id="tool-erase" class="btn skt-tool-btn"><i class="skt-icon skt-icon-erase"></i></a></li>
        	<li><a id="tool-text" class="btn skt-tool-btn"><i class="skt-icon skt-icon-text"></i></a></li>
        	<li><a id="tool-zoom-in" class="btn skt-tool-btn"><i class="skt-icon skt-icon-zoom-in"></i></a></li>
        	<li><a id="tool-zoom-out" class="btn skt-tool-btn"><i class="skt-icon skt-icon-zoom-out"></i></a></li>
        	<li><a id="tool-pan" class="btn skt-tool-btn"><i class="skt-icon skt-icon-pan"></i></a></li>
        	<li>
	          	<a id="tool-color" class="btn skt-tool-btn">
	            	<input id="tool-colorpicker" value="#000000"></input>
	          	</a>
        	</li>
      	</ul>
    </div>
	<div id="start-message">Select a or create slide to view</div>
	<div id="editor"></div>
	
<!--Canvas para exportar svg y guardar como png -->
	<canvas id="canvas" 
		style="visibility:hidden;"
		width="1024"
		height="672">
    </canvas>
    
<!--iframe para importar imagenes -->
	<iframe id="upload-files-iframe" name="upload-files-iframe" onload="Skt.Slide.handleUploadIFrameLoaded();" style="display: none;"></iframe>

    <div id="users-sidebar">
    
    	<a id="users-sidebar-handle" class="handle"></a>
    	
    	<div id="users-sidebar-top">
			<div id="login-data">
				Session <span id="login-data-name">${user.name} ${user.lastname}</span> 
				<a id="icon-signout" href="${basePath}/logout"><i class="icon-signout"></i></a>
			</div>
		</div>
		
		<div id="users-sidebar-messages"></div>
		
		<div id="users-sidebar-body">
		
			<div id="users-sidebar-body-list">
				<ul id="users-sidebar-body-list-ul" class="nav nav-pills nav-stacked"></ul>
			</div>
			
			<div id="users-sidebar-body-groups">
			
				<h3 id="work-groups-label">
					<span class="ui-icon group-type-icon ui-icon-star"></span>
					<a>Work groups</a> 
				</h3>
				<div id="work-groups-body">
					<div id="add-work-group-btn-toolbar" class="btn-toolbar">
						<div class="btn-group">
							<a id="add-work-group-btn" class="btn">
								<i class="icon-plus"></i>
							</a>
						</div>
					</div>
					<div id="work-groups-list"></div>
				</div>
				
				<h3 id="notes-groups-label">
					<span class="ui-icon group-type-icon ui-icon-note"></span>
					<a>Notes groups</a> 
				</h3>
				<div id="notes-groups-body">
					<div id="add-notes-group-btn-toolbar" class="btn-toolbar">
						<div class="btn-group">
							<a id="add-notes-group-btn" class="btn">
								<i class="icon-plus"></i>
							</a>
						</div>
					</div>
					<div id="notes-groups-list"></div>
				</div>
				
			</div>
			
		</div>
    </div>
	    
	<div id="slides-sidebar">
	
      	<div class="dragzone ui-resizable-handle ui-resizable-w"></div>
		<a id="slides-sidebar-handle" class="handle"></a>
		
		<div id="slides-sidebar-body">
		
			<h3 id="personal-slides-label"><a>Personal</a></h3>
	        <div id="personal-slides-body" class="slide-type-body">
	            <div class="btn-toolbar">
	              	<div class="btn-group">          
				      	<a id="add-room-personal" class="btn">
				      		<i class="icon-plus"></i>
				      	</a>
	              	</div>
	            </div>
	            <div id="room-list-personal" class="room-list">
		            <ul id="rooms-personal" class="rooms-ul nav nav-pills"></ul>
	            </div>
            	<div class="room-list-handle ui-resizable-handle ui-resizable-s"></div>
	        </div>
		
			<h3 id="groupal-slides-label"><a>Groupal</a></h3>
			<div id="groupal-slides-body">
				<div id="groups-list"></div>
				<div class="room-list-handle ui-resizable-handle ui-resizable-s"></div>
			</div>
		
			<h3 id="screen-slides-label"><a>Screen</a></h3>
	        <div id="screen-slides-body" class="slide-type-body">
	            <div class="btn-toolbar">
	              	<div class="btn-group">          
				      	<a id="add-room-screen" class="btn">
				      		<i class="icon-plus"></i>
				      	</a>
	              	</div>
	            </div>
	            <div id="room-list-screen" class="room-list">
		            <ul id="rooms-screen" class="rooms-ul nav nav-pills"></ul>
	            </div>
            	<div class="room-list-handle ui-resizable-handle ui-resizable-s"></div>
	        </div>
	        
		</div>
	</div>

